<!--
  @author tanghongjun
  @since 2018/10/19 08:59
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/common :: jscss2">
    <title>渠道库存</title>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-split">&nbsp;</div>

        <div class="layui-card-body">
            <table class="layui-hide" id="zmn-table" lay-filter="zmn-table" th:fragment="table">
                <thead>
                <tr>
                    <th lay-data="{type:'checkbox', width:50, unresize:true, align:'center', fixed:'left'}"></th>
                    <th lay-data="{field:'id', hide:true}">id</th>
                    <th th:if="${flag == 'SP'}" lay-data="{field:'cityName', width:150, unresize:true, align:'center'}">城市名称</th>
                    <th lay-data="{field:'servCategName', width:150, unresize:true, align:'center'}">服务分类</th>
                    <th lay-data="{field:'categOneName', width:150, unresize:false, align:'left'}">前台一级分类</th>
                    <th lay-data="{field:'categTwoName', width:150, unresize:false, align:'left'}">前台二级分类</th>
                    <th lay-data="{field:'closeDaysStr', unresize:false, align:'center'}">关闭未来日期</th>
                </tr>
                </thead>

                <tbody>
                <tr th:each="item:${items}">
                    <td></td>
                    <td th:text="${item.id}">id</td>
                    <td th:if="${flag == 'SP'}" th:text="${item.cityName}">cityName</td>
                    <td th:text="${item.servCategName}" class="">servCategName</td>
                    <td th:text="${item.categOneName}" class="layui-gray">categOneName</td>
                    <td th:text="${item.categTwoName}" class="layui-gray">categTwoName</td>
                    <td th:text="${#dates.format(item.day, 'MM.dd')}" class="layui-gray">day</td>
                </tr>
                </tbody>
            </table>

            <script type="text/html" id="zmn-table-tool">
                <div class="layui-btn-container">
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="open">开启</button>
                    </div>
                </div>
            </script>
        </div>

    </div>

</div>
</body>
</html>
<script type="text/javascript" th:inline="javascript">

    var json = {
        query: [[${query}]],
        servCategList: [[${servCategList}]],
        categOneList: [[${categOneList}]],
        categTwoList: [[${categTwoList}]],
        submitURL: [[${submitURL}]],
    };

    layui.config({
        version: 202003191042,
        base: "/static/lay/"
    }).extend({
        index: "lib/index",
    }).use(['index', 'form', 'table', 'laypage', 'layedit', 'laytpl'], function(){
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var laypage = layui.laypage;
        var layedit = layui.layedit;
        var laytpl = layui.laytpl;

        table.init('zmn-table', {
            toolbar: "#zmn-table-tool",
            defaultToolbar: [] ,
            page: true,
            limit: 50,
            height: 'full-120'
        });


        let ids = new Array();

        // 选择（全选或单选）
        table.on("checkbox(zmn-table)", function (obj) {
            ids = table.checkStatus('zmn-table').data.map(item => item.id);
        });

        table.on("toolbar(zmn-table)", function (obj) {

            if(obj.event == "open") {
                if (ids.length === 0) {
                    return layer.alert("请选择至少一条数据！");
                }
                var url = json.submitURL;
                console.log(url);
                $.ajax({
                    async: false,
                    type: "POST", url: url,
                    contentType: "application/json", dataType: "json", data: JSON.stringify(ids),
                    success:function(resp) {
                        if(resp.status == 200) {
                            zmnPage.reload('操作成功!', 1000)
                        }else{
                            layer.msg(resp.message,{icon: 2});
                        }
                    },
                    error:function(XMLHttpRequest, status, errorThrown){}
                });
            }
        });

    });

</script>